/**************************************************/
/* INSTRUCTIONS: DRAG OVER THE IMAGE TO TWIST IT */
/**************************************************/
/*based original css on simple cube @  http://dabblet.com/gist/4576285 then just experiemented */
body {
  perspective: 50em;
  background-color: #333333;
}

.cube {
  position: relative;
  margin: 0em auto 0;
  padding: 0px;
  width: 20em;
  height: 3.0em;
  list-style: none;
  transform-style: preserve-3d;
  /*animation: ani 8s infinite linear;*/
}

.face {
  box-sizing: border-box;
  position: absolute;
  top: 180px;
  left: 50%;
  /*border: 1px solid #f0f0f0;*/
  margin: -8em;
  padding: 1.6em;
  width: 20em;
  height: 2em;
  opacity: .85;
  background: lightblue;
  /*Creative Commons image from http://www.flickr.com/photos/37825670@N07/3562600154/sizes/z/in/photostream/ */
  background: url(http://i.imgur.com/k6dbiLv.jpg) -115px -900px;
  background-repeat: no-repeat;
  backface-visibility: hidden;
}

.face:nth-child(1) {
  transform: translateZ(10em);
}

.face:nth-child(2) {
  transform: rotateY(180deg) translateZ(10em);
}

.face:nth-child(3) {
  transform: rotateY(90deg) translateZ(10em);
}

.face:nth-child(4) {
  transform: rotateY(-90deg) translateZ(10em);
}

a {
  color: #ccc;
}
